{extend name="public/base"}

{block name="main"}
<div class="layui-card">
    <blockquote class="layui-elem-quote">产品图片列表，排序从小到大</blockquote>
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
        <legend>相册图片</legend>
    </fieldset>
    <button type="button" class="layui-btn" id="upload_photo_album_images">上传相册图片</button>
    <table class="layui-table">
        <colgroup>
            <col width="120">
            <col width="120">
            <col>
        </colgroup>
        <thead>
        <tr>
            <th>图片</th>
            <th>排序</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        {volist name="photo_album_images" id="vo"}
        <tr>
            <td><img src="{$vo.image}" style="max-width: 50px; max-height: 50px" /></td>
            <td><input type="text" value="{$vo.sort}" data-default-sort="{$vo.sort}" data-id="{$vo.id}" class="sort layui-input layui-table-edit" /> </td>
            <td><button type="button" class="layui-btn delete" data-id="{$vo.id}">删除</button> </td>
        </tr>
        {/volist}
        </tbody>
    </table>

    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
        <legend>详情图片</legend>
    </fieldset>
    <button type="button" class="layui-btn" id="upload_content_images">上传详情图片</button>
    <table class="layui-table">
        <colgroup>
            <col width="120">
            <col width="120">
            <col>
        </colgroup>
        <thead>
        <tr>
            <th>图片</th>
            <th>排序</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        {volist name="content_images" id="vo"}
        <tr>
            <td><img src="{$vo.image}" style="max-width: 50px; max-height: 50px" /></td>
            <td><input type="text" value="{$vo.sort}" data-default-sort="{$vo.sort}" data-id="{$vo.id}" class="sort layui-input layui-table-edit" /> </td>
            <td><button type="button" class="layui-btn delete" data-id="{$vo.id}">删除</button> </td>
        </tr>
        {/volist}
        </tbody>
    </table>
</div>
{/block}

{block name="js"}
<script>

    layui.config({
        base: '/layui_admin/src/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'carousel', 'table', 'upload'], function () {
        var $ = layui.jquery, admin = layui.admin, carousel = layui.carousel, table = layui.table, upload = layui.upload;
        //常规轮播
        carousel.render({
            elem: '#test1'
            ,arrow: 'always'
        });

        // 上传图片
        upload.render({
            elem: '#upload_photo_album_images'
            ,url: '{:url("set_image")}'
            ,data :{
                id : '{$Request.param.id}',
                type : 1
            }
            ,done: function(res, index, upload){
                if(res.code == 0){ //上传成功
                    layer.msg('上传成功', {icon: 1, time: 888}, function () {
                        window.location.reload();
                    });
                }
                this.error(index, upload);
            }
        });

        // 上传图片
        upload.render({
            elem: '#upload_content_images'
            ,url: '{:url("set_image")}'
            ,data :{
                id : '{$Request.param.id}',
                type : 2
            }
            ,done: function(res, index, upload){
                if(res.code == 0){ //上传成功
                    layer.msg('上传成功', {icon: 1, time: 888}, function () {
                        window.location.reload();
                    });
                }
                this.error(index, upload);
            }
        });

        // 排序
        $(".sort").blur(function () {
            if ($(this).val() != $(this).data('default-sort')) {
                admin.req({
                    type: 'post',
                    url: '{:url("save_img_sort")}',
                    data: {
                        id: $(this).data('id'),
                        sort: $(this).val()
                    },
                    done: function (res) {
                        layer.msg('修改成功', {icon: 1, time: 888}, function () {
                            window.location.reload();
                        });
                    }
                });
            } 
        });

        // 删除
        $(".delete").click(function () {
            let _this = $(this);
            layer.confirm('确定删除？', function () {
                admin.req({
                    type: 'post',
                    url: '{:url("delete_image")}',
                    data: {
                        id: _this.data('id')
                    },
                    done: function (res) {
                        layer.msg('删除成功', {icon: 1, time: 888}, function () {
                            window.location.reload();
                        });
                    }
                });
            });
        });

    });
</script>
{/block}